<template>
	<div class="container">
		<search-date
			@getChangeTime="getChangeTime"
			:initTimeDatas="initTimeDatas"
		></search-date>
		<el-row>
			<!-- <search-date @getTime="getTimeDate"></search-date> -->
		</el-row>

		<el-row class="kinds">
			<el-col :span="5" class="item">
				<div>
					<h2>图文报告</h2>
					<h1>{{ sum_total.result_cnt + '/' + sum_total.result_size }}</h1>
				</div>
			</el-col>
			<el-col :span="5" class="item">
				<h2>图像</h2>
				<h1>{{ sum_total.imge_cnt + '/' + sum_total.imge_size }}</h1>
			</el-col>
			<el-col :span="5" class="item">
				<h2>胶片</h2>
				<h1>{{ sum_total.film_cnt + '/' + sum_total.film_size }}</h1>
			</el-col>
			<!-- <el-col :span="5" class="item">
				<h2>病理切片</h2>
				<h1>600万/10T</h1>
			</el-col>
			<el-col :span="5" class="item">
				<h2>心电波形</h2>
				<h1>600万/10T</h1>
			</el-col> -->
		</el-row>
		<el-table
			:data="tableData"
			:span-method="objectSpanMethod"
			show-summary
			stripe
			fit
		>
			<el-table-column
				prop="district"
				label="所属类型"
				align="left"
				width="150"
			/>
			<el-table-column
				prop="org_name"
				label="医疗机构"
				align="left"
				width="150"
			/>
			<el-table-column prop="result_size" label="图文报告" align="left" />
			<el-table-column prop="imge_size" label="图像" align="left" />
			<el-table-column prop="film_size" label="胶片" align="left" />
			<!-- 	<el-table-column prop="flow" label="总计" align="left" />-->
		</el-table>
	</div>
</template>
<script>
import searchDate from '@/components/common/searchDate'
import { getRegStoreUsage } from '@/api/admin'
import { formatData, groupBy, objSum } from '@/utils/base.js'

export default {
	name: 'tableCom',
	components: { searchDate },
	data () {
		return {
			initTimeDatas: [
				{
					text: '不限',
					code: 'allTime',
				},
				{
					text: '最近半年',
					code: 'lastHalfYear',
				},
				{
					text: '最近一年',
					code: 'lastOneYear',
				},
			],
			result_data: {
				Image: 0,
				Film: 0,
				Result: 0,
			},
			tableData: [],
			rowIndex: '-1',
			OrderIndexArr: [],
			org_nameArr: [],
			listQuery: {
				//  todo  后续去除
				start_date: '2015-12-25',
				end_date: '2025-12-25'
			},
			resultData: [
				{ label: '图文报告', val: null, type: 'Result' },
				{ label: '图像', val: null, type: 'Image' },
				{ label: '胶片', val: null, type: 'Film' },
			],
			sum_total: {
				film_cnt: 0,
				film_size: 0,
				imge_cnt: 0,
				imge_size: 0,
				result_cnt: 0,
				result_size: 0
			}
		}
	},
	methods: {
		getChangeTime ( val ) {
			// 获取时间
			console.log( val )
			if ( val ) {
				this.listQuery = Object.assign( this.listQuery, val )
			}
			this.getList()
		},
		getList () {
			getRegStoreUsage( this.listQuery ).then( res => {
				// TODO 未完成
				if ( res.code === 0 ) {
					let data = res.data
					// console.log( data );
					// 数据处理
					if ( res.data.length > 0 ) {
						let obj = {
							Image: null,
							Film: null,
							Result: null
						}
						let _data = []
						data.map( item => {
							let detail_list = item.detail_list
							detail_list.map( list => {
								// 判断类型
								list.district = item.district
								list.district_code = item.district_code
								_data.push( list )
							} )
							// _data = [ ...detail_list ]
							// console.log( detail_list );
						} )
						let groupByData = this.groupBy( _data, function ( item ) {
							//  分组
							return item.org_code
						} )
						let lastdata = []
						groupByData.map( data => {
							// 数据处理
							// 二次分组 根据org_code
							let obj = {
								district_code: null,
								district: null,
								org_code: null,
								org_name: null,
								film_cnt: null,
								film_size: null,
								imge_cnt: null,
								imge_size: null,
								result_cnt: null,
								result_size: null
							}
							data.map( dat => {
								obj.org_code = dat.org_code
								obj.org_name = dat.org_name
								obj.district_code = dat.district_code
								obj.district = dat.district
								// debugger
								if ( dat.type_code === 'Film' ) {
									obj.film_cnt = Math.round( dat.file_cnt )
									obj.film_size = Math.round( dat.used_size )
								} else if ( dat.type_code === 'Image' ) {
									obj.imge_cnt = Math.round( dat.file_cnt )
									obj.imge_size = Math.round( dat.used_size )
								}
								else {
									obj.result_cnt = Math.round( dat.file_cnt )
									obj.result_size = Math.round( dat.used_size )
								}
								console.log( obj );
							} )
							lastdata.push( obj )
						} )
						console.log( lastdata );
						// 表格数据处理
						// 求和
						let _sum = objSum( lastdata, 'imge_size', 'imge_cnt', 'film_size', 'film_cnt', 'result_size', 'result_cnt' )
						for ( const key in _sum ) {
							if ( key.slice( -3 ) === 'cnt' ) {
								// 使用量
								_sum[ key ] = Math.round( _sum[ key ] )
								if ( _sum[ key ] / 10000 > 1 ) {
									_sum[ key ] = Math.round( _sum[ key ] / 10000 ) + '万'
								}
							} else {
								_sum[ key ] = Math.round( _sum[ key ] )

								if ( _sum[ key ] / 1024 > 1 ) {
									_sum[ key ] = Math.round( _sum[ key ] / 1024 ) + 'TB'
								} else {
									_sum[ key ] = Math.round( _sum[ key ] ) + 'GB'
								}
							}
						}
						console.log( _sum );
						this.sum_total = _sum
						this.tableData = lastdata
						this.getOrderNumber()
						console.log( this.tableData );
						this.result_data = data[ 0 ]

						// 绘图 {name count} {name: size}
						// this.getCount( data )
					} else {
						this.tableData = []
						this.sum_total = {
							film_cnt: 0,
							film_size: 0,
							imge_cnt: 0,
							imge_size: 0,
							result_cnt: 0,
							result_size: 0
						}
					}
				}

			} )
		},
		//表格合并
		getOrderNumber () {
			let OrderObj = {}
			this.tableData.forEach( ( element, index ) => {
				element.rowIndex = index
				if ( OrderObj[ element.district_code ] ) {
					OrderObj[ element.district_code ].push( index )
				} else {
					OrderObj[ element.district_code ] = []
					OrderObj[ element.district_code ].push( index )
				}
			} )

			// 将数组长度大于1的值 存储到this.OrderIndexArr（也就是需要合并的项）
			for ( let k in OrderObj ) {
				if ( OrderObj[ k ].length > 1 ) {
					this.OrderIndexArr.push( OrderObj[ k ] )
				}
			}
		},
		// 合并单元格
		objectSpanMethod ( {
			row,
			column,
			rowIndex,
			columnIndex
		} ) {
			if ( columnIndex === 0 ) {
				for ( let i = 0; i < this.OrderIndexArr.length; i++ ) {
					let element = this.OrderIndexArr[ i ]
					for ( let j = 0; j < element.length; j++ ) {
						let item = element[ j ]
						if ( rowIndex == item ) {
							if ( j == 0 ) {
								return {
									rowspan: element.length,
									colspan: 1
								}
							} else if ( j != 0 ) {
								return {
									rowspan: 0,
									colspan: 0
								}
							}
						}
					}
				}
			}
		},
		groupBy ( array, f ) {
			var groups = {};
			array.forEach( function ( o ) {
				var group = JSON.stringify( f( o ) );
				groups[ group ] = groups[ group ] || [];
				groups[ group ].push( o );
			} );
			return Object.keys( groups ).map( function ( group ) {
				return groups[ group ];
			} );

		},
	},
	created () {
		this.$nextTick( () => {
			this.getList()
		} )
	},
}
</script>
<style lang="less" scoped>
.container {
	padding-left: 20px;
	.kinds {
		/* margin-top: 20px;
		margin-bottom: 20px; */
		.item {
			width: 18.35%;
			height: 180px;
			margin-right: 1.4%;
			// border: 1px solid #00ff00;
			text-align: left;
			padding-top: 45px;
			padding-left: 2.5%;
			h2 {
				color: #333333;
				font-weight: 400;
				font-size: 18px;
				height: 25px;
			}
			h1 {
				height: 52px;
				line-height: 52px;
				font-size: 30px;
			}
		}

		> :nth-child(1) {
			background-image: url('~@/assets/imgs/data-watch/img.png');
			background-size: 100% 100%;
			background-repeat: no-repeat;
			h1 {
				color: @1C8BE4;
			}
		}
		> :nth-child(2) {
			background-image: url('~@/assets/imgs/data-watch/movie.png');
			background-size: 100% 100%;
			background-repeat: no-repeat;
			h1 {
				color: @5660A9;
			}
		}
		> :nth-child(3) {
			background-image: url('~@/assets/imgs/data-watch/film.png');
			background-size: 100% 100%;
			background-repeat: no-repeat;
			h1 {
				color: @EF8900;
			}
		}
		> :nth-child(4) {
			background-image: url('~@/assets/imgs/data-watch/binli.png');
			background-size: 100% 100%;
			background-repeat: no-repeat;
			h1 {
				color: @49B523;
			}
		}
		> :nth-child(5) {
			background-image: url('~@/assets/imgs/data-watch/xindian.png');
			background-size: 100% 100%;
			background-repeat: no-repeat;
			h1 {
				color: @FF6F6F;
			}
		}
	}
}
</style>
